<section>
  <header><h3>基本类型</h3></header>
  <article>
    <div class="example">
      <div class="panel">
        <div class="panel-body" contenteditable>默认的.panel所做的只是提供基本的边界和内部，来包含内容。</div>
      </div>
    </div>
    <pre><code>&lt;div class=&quot;<em>panel</em>&quot;&gt;
  &lt;div class=&quot;<em>panel-body</em>&quot;&gt;
    ...
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
  </article>
</section>

<section>
  <header><h3>带标题的面板</h3></header>
  <article>
    <div class="example">
      <div class="panel">
        <div class="panel-heading" contenteditable>面板标题</div>
        <div class="panel-body" contenteditable>面板内容</div>
      </div>
    </div>
    <pre><code>&lt;div class=&quot;panel&quot;&gt;
  &lt;div class=&quot;<em>panel-heading</em>&quot;&gt;
    ...
  &lt;/div&gt;
  &lt;div class=&quot;panel-body&quot;&gt;
    ...
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
  </article>
</section>

<section>
  <header><h3>带脚注的面板</h3></header>
  <article>
    <div class="example">
      <div class="panel">
        <div class="panel-body" contenteditable>面板内容</div>
        <div class="panel-footer" contenteditable>面板脚注</div>
      </div>
    </div>
    <pre><code>&lt;div class=&quot;panel&quot;&gt;
  &lt;div class=&quot;panel-body&quot;&gt;
    ...
  &lt;/div&gt;
  &lt;div class=&quot;<em>panel-footer</em>&quot;&gt;
    ...
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
  </article>
</section>

<section>
  <header><h3>使用不同色彩主题</h3></header>
  <article>
    <div class="example">
      <div class="panel panel-primary">
        <div class="panel-heading" contenteditable>.panel-primary</div>
        <div class="panel-body" contenteditable>面板内容</div>
      </div>
      <div class="panel panel-success">
        <div class="panel-heading" contenteditable>.panel-success</div>
        <div class="panel-body" contenteditable>面板内容</div>
      </div>
      <div class="panel panel-warning">
        <div class="panel-heading" contenteditable>.panel-warning</div>
        <div class="panel-body" contenteditable>面板内容</div>
      </div>
      <div class="panel panel-danger">
        <div class="panel-heading" contenteditable>.panel-danger</div>
        <div class="panel-body" contenteditable>面板内容</div>
      </div>
      <div class="panel panel-info">
        <div class="panel-heading" contenteditable>.panel-info</div>
        <div class="panel-body" contenteditable>面板内容</div>
      </div>
    </div>
    <pre><code>&lt;div class=&quot;panel <em>panel-primary</em>&quot;&gt;
  ...
&lt;/div&gt;</code></pre>
    <pre><code>&lt;div class=&quot;panel <em>panel-success</em>&quot;&gt;
  ...
&lt;/div&gt;</code></pre>
    <pre><code>&lt;div class=&quot;panel <em>panel-warning</em>&quot;&gt;
  ...
&lt;/div&gt;</code></pre>
    <pre><code>&lt;div class=&quot;panel <em>panel-danger</em>&quot;&gt;
  ...
&lt;/div&gt;</code></pre>
    <pre><code>&lt;div class=&quot;panel <em>panel-info</em>&quot;&gt;
  ...
&lt;/div&gt;</code></pre>
  </article>
</section>

<section>
  <header>
    <h3>包含表格</h3>
  </header>
  <article>
    <div class="example">
      <div class="panel">
        <div class="panel-heading" contenteditable>Panel heading</div>
        <table class="table">
          <thead>
            <tr>
              <th>Lorem ipsum.</th>
              <th>Repudiandae, harum!</th>
              <th>Tenetur, corporis.</th>
              <th>Perspiciatis, porro?</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Lorem ipsum.</td>
              <td>Officiis, non.</td>
              <td>Molestias, qui.</td>
              <td>Odit, ducimus.</td>
            </tr>
            <tr>
              <td>Lorem ipsum.</td>
              <td>Repellendus, exercitationem!</td>
              <td>Velit, eos.</td>
              <td>Eius, officiis.</td>
            </tr>
            <tr>
              <td>Lorem ipsum.</td>
              <td>Amet, esse!</td>
              <td>Quis, pariatur!</td>
              <td>Totam, quae.</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <pre><code>&lt;div class=&quot;panel&quot;&gt;
  &lt;div class=&quot;panel-heading&quot;&gt;
    ...
  &lt;/div&gt;
  <em>&lt;table class=&quot;table&quot;&gt;</em>
    ...
  <em>&lt;/table&gt;</em>
&lt;/div&gt;</code></pre>
  </article>
</section>

<section>
  <header>
    <h3>包含列表</h3>
  </header>
  <article>
    <div class="example">
      <div class="panel">
        <div class="panel-heading">项目</div>
        <ul class="list-group">
          <li class="list-group-item">待办</li>
          <li class="list-group-item">需求</li>
          <li class="list-group-item">任务</li>
          <li class="list-group-item">Bug</li>
          <li class="list-group-item">用例</li>
        </ul>
      </div>
    </div>
    <pre><code>&lt;div class=&quot;panel&quot;&gt;
  &lt;div class=&quot;panel-heading&quot;&gt;
    ...
  &lt;/div&gt;
  <em>&lt;ul class=&quot;list-group&quot;&gt;</em>
    ...
  <em>&lt;/ul&gt;</em>
&lt;/div&gt;</code></pre>
  </article>
</section>

<section>
  <header><h3>面板组</h3></header>
  <article>
    <div class="example">
      <div class="panel-group">
        <div class="panel">
          <div class="panel-heading">面板标题</div>
          <div class="panel-body">面板内容</div>
          <div class="panel-footer">面板脚注</div>
        </div>
        <div class="panel">
          <div class="panel-heading">面板标题</div>
          <div class="panel-body">面板内容</div>
          <div class="panel-footer">面板脚注</div>
        </div>
        <div class="panel">
          <div class="panel-heading">面板标题</div>
          <div class="panel-body">面板内容</div>
          <div class="panel-footer">面板脚注</div>
        </div>
      </div>
    </div>
    <pre><code><em>&lt;div class=&quot;panel-group&quot;&gt;</em>
  &lt;div class=&quot;panel&quot;&gt;
    ...
  &lt;/div&gt;
  &lt;div class=&quot;panel&quot;&gt;
    ...
  &lt;/div&gt;
  &lt;div class=&quot;panel&quot;&gt;
    ...
  &lt;/div&gt;
  ...
<em>&lt;/div&gt;</em></code></pre>
  </article>
</section>
